

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Promise初体验
    <!-- 
        Promise 是ES6异步编程的一种解决方案,解决回调地狱问题。
        许诺器，本质是构造函数，学名叫class 可以 new 
        Promise内部通常放的是将来要执行的异步代码，而这些异步代码执行完成后会有两种结果：成功或失败。
        因此Promise有三种状态：原理
​	     pending(初始状态 运行中) 、fullfill/resolve(成功状态)、rejecte(失败状态)。

        当在Promise内部执行了resolve()成功时的回调方法则执行定义在then()中的成功时的回调函数，
        并将Promise的pending初始状态转换fullfill/resolve成功状态；

        当在Promise内部执行了resolve()成功时的回调方法则执行定义在then()中
        第二个参数的失败时的回调函数或定义在catch()中失败时的回调函数，
        并将Promise的pending初始状态转换reject失败状态。 
     -->
       

    <script>

        let p =  new Promise((resolve,reject)=>{
            if (false) {
                resolve("成功")
            } else {
                reject("失败")
            }
        })

        console.log(p);
        

        // 回调地狱问题 层次  树形结构
        // setTimeout(() => {
        //     console.log('第一个请求完毕，cate')
        //     setTimeout(() => {
        //         console.log('第二个请求完毕，list')
        //         setTimeout(() => {
        //             console.log('第三个请求完毕，desc')
        //             setTimeout(() => {
        //                 console.log('第四个请求完毕，asc') 

        //             }, 1000);
        //         }, 1000);    
        //     }, 1000);
        // }, 1000);

        // console.log('第一个请求完毕，cate')
        // let p1 =  new Promise((resolve,reject)=>{
        //    setTimeout(() => {
        //     console.log('第三个请求完毕，desc')
        // }, 1000);
        //     console.log('第二个请求完毕，list')
        // })


        // .then()  使用promsie.then链式调用语法特点来解决传统的回调地狱问题  new Promise(()=>{}).then().then().then()
        new Promise((resolve,reject)=>{
            setTimeout(() => {
                console.log('第一个请求完毕，cate')
                resolve([1,2,3,4,5])
            }, 1000);
        }).then(res=>{
            console.log('商品分类：', res)
            setTimeout(() => {
                console.log('第二个请求完毕，list')
               
            }, 1000);
        }).then(()=>{
            setTimeout(() => {
                console.log('第三个请求完毕，desc')
                
            }, 1000);
        }).then(()=>{
            setTimeout(() => {
                console.log('第四个请求完毕，asc')
                
            }, 1000);
        })


    </script>
</body>
</html>